<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import type { Ref } from "vue";
import useConsultStore from "@/pinia/modules/consultStore/consultStore.ts";

const consultStore = useConsultStore();

const { department } = storeToRefs(consultStore);

const active: Ref<number> = ref<number>(0);


const subDepartment = computed(() => department.value[active.value]?.child);

onMounted(() => {
   consultStore.fetchDepartment();
});

</script>

<template>
   <div class="consult-dep-page">
      <NavBar left-text="返回" title="选择科室" @click-left="$router.back()"></NavBar>
      <div class="wrapper">
         <van-sidebar v-model="active">
            <van-sidebar-item v-for="(top) in department" :key="top.id" :title="top.name"></van-sidebar-item>
         </van-sidebar>
         <div class="sub-dep">
            <router-link to="/consult/illness" v-for="(sub) in subDepartment" :key="sub.id" @click="consultStore.setDepId(sub.id)">{{ sub.name }}</router-link>
         </div>
      </div>
   </div>
</template>

<style lang="scss" scoped>
.consult-dep-page {
   .wrapper {
      height: calc(100vh - 46px);
      overflow: hidden;
      display: flex;

      .van-sidebar {
         width: 114px;

         &-item {
            padding: 14px;
            color: var(--cp-tag);

            &--select {
               color: var(--cp-main);
               font-weight: normal;

               &::before {
                  background-color: #16C2A3;
               }

            }
         }
      }

      .sub-dep {
         flex: 1;
         height: 100%;
         overflow-y: auto;

         > a {
            display: block;
            padding: 14px 30px;
            color: var(--cp-dark);

            &.active {
               color: #16C2A3;
               font-weight: 600;
            }
         }
      }
   }
}
</style>
